<script setup>
import { tool } from "../../tool/index"
import { reactive, ref, onMounted, defineProps, watch } from 'vue'
import { useRouter } from "vue-router"

// API 地址
const UserName = "user"
const ArticleName = "article"
const imageUrl = tool.serverPath + "api/app_api/image/download?fileName="
// 初始化数据
const props = defineProps(["blog"])
const router = useRouter()
const limit = ref(props.blog.limit)
const offset = ref(1)
const pageCount = ref(1)
const Loding = ref(true)
const desc = ref("id")
const categories = ref(false)
const article_user = ref({})
// 监听 props 实现实时查询
watch(props.blog, (newValue) => {
    query()
})
// 判断 category 是否为空，设置状态
function categoryOn() {
    if (props.blog.categories) {
        categories.value = true
    } else {
        categories.value = false
    }
}
// 进行分类显示
function categoriesOn() {
    if (categories.value) {
        limit.value = 8
        return {
            OpLike: false,
            key: ["category"],
            value: [`${props.blog.categories.id}`],
            Or: false
        }
    } else {
        return props.blog
    }
}
// Axios 查询
async function Search(path, object) {
    try {
        const response = await tool.axiosApi(path, object, "get")
        const data = {
            data:response
        }
        return data
    } catch (error) {
        console.log(error)
    }
}
// 查询列表数据
async function query() {
    article_user.value = {
        data: [{
            article: "",
            user: ""
        }]
    }
    let blog = categoriesOn()
    const articleObj = reactive({
        key: "Search",
        limit: limit.value,
        offset: offset.value,
        order: [[desc.value, "desc"]],
        data: {
            OpLike: blog.OpLike,
            key: blog.key,
            value: blog.value,
            Or: blog.Or
        },
        include:[{
            model: "user",
            attributes: ["username", "nickname", "avatar"],
            where:["id","author_id"]
        }]
    })
    try {
        const Article = await Search(ArticleName, articleObj)
        pageCount.value = Article.data.count
        var data = reactive({})
        data.data = Article.data.data
        for (let index = 0; index < data.data.length; index++) {
            var articleData = data.data[index]
            articleData.image = imageUrl + articleData.image
            const user = await Search(UserName, {
                key: "Search",
                columns: ["username", "nickname", "avatar"],
                data: {
                    key: ["id"],
                    value: [data.data[index].author_id]
                }
            })
            if (user.data.count == 0)
                continue
            var userData = user.data.data[0]
            userData.avatar = imageUrl + userData.avatar
            article_user.value.data[index] = {
                article: articleData,
                user: userData
            }
        }
        Loding.value = false
    } catch (error) {

    }
}
// 分页操作
function handlePageChange(value) {
    offset.value = value
    query()
    window.scrollTo(0, 0)
}
// 载入数据
onMounted(() => {
    categoryOn()
    query()
    window.scrollTo(0, 0)
})
// 进入博客内容页
function GotoContent(value) {
    const url = router.resolve({ name: 'BlogContent', params: { BlogId: value } }).href
    window.open(url, '_blank')
}
// 进入文章分类页
function GotoCategories(value) {
    const url = router.resolve({ name: 'BlogCategories', params: { id: value } }).href
    window.open(url, '_blank')
}
// 排序方式
function NewData(value) {
    desc.value = value
    query()
}
</script>

<template>
    <div class="content_body">
        <!-- 瀑布流 -->
        <div class="title">
            <span v-if="categories"> {{ props.blog.categories.title }} </span>
            <el-button @click="NewData('created_at')">最新</el-button>
            <el-button @click="NewData('like_count')">热门</el-button>
            <el-button @click="NewData('updated_at')" type="success">最近更新</el-button>
        </div>
        <el-row v-loading="Loding" class="contentALL" :gutter="40">
            <el-col class="col" v-if="pageCount > 0" v-for="(item, index) in article_user.data" :span="6">
                <div class="content" @click="GotoContent(item.article.id)">
                    <div class="img">
                        <el-image :src="item.article.image" fit="fill ">
                            <template #error>
                                <el-empty image-size="60" description="暂无图片" />
                            </template>
                        </el-image>
                    </div>
                    <p><el-text truncated>{{ item.article.title }}</el-text></p>
                    <el-row class="user" :gutter="20">
                        <el-col :span="8">
                            <el-image :src="item.user.avatar" fit="cover" />
                        </el-col>
                        <el-col :span="8"><el-text truncated>{{ item.user.nickname }}</el-text></el-col>
                        <el-col :span="8"><el-text truncated>{{ item.article.created_at }}</el-text>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col v-else :span="24"> <el-empty description="暂无文章" /> </el-col>
        </el-row>
        <div class="bottom">
            <div>
                <el-pagination v-if="!categories" @current-change="handlePageChange" :background="true"
                    layout="prev, pager, next" :page-size="limit" :total="pageCount" />
                <el-button v-else @click="GotoCategories(props.blog.categories.id)">查看更多{{ props.blog.categories.title
                }}<el-icon>
                        <ArrowRightBold />
                    </el-icon></el-button>
            </div>
        </div>
    </div>
</template>

<style scoped >
.content_body {
    margin: 20px;
    position: static;
}

.content_body .title {
    font-size: 35px;
}

.content_body .title span {
    margin-right: 15px;
}

.content_body .title .el-button {
    border: none;
}

.contentALL {
    transition: 0.5s;
    min-height: 400px;
    padding-bottom: 20px;
}

.contentALL .col {
    margin-top: 20px;
}

.content {
    padding: 15px;
    border-radius: 5px;
    height: auto;
    background-color: white;
    transition: all 0.2s ease-out;
}

.content .img {
    text-align: center;
    border-radius: 5px;
    width: 100%;
    overflow: hidden;
    height: 150px;
}

.content .user {
    height: 40px;
    line-height: 40px;
}

.content .user .el-image {
    margin: auto;
    width: 40px;
    height: 40px;
    border-radius: 25px;
}

.content:hover {
    transform: translateY(-10px);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

.content p {
    font-weight: bold;
}

.content .image-slot {
    background-color: aqua;
}

.color {
    color: #9b9b9b;
}

.bottom {
    display: flex;
    justify-content: center;
}

.bottom .el-button {
    border: 0px;
    color: white;
    background-color: #037AFF;
    border-radius: 10px;
    width: 200px;
    height: 50px;
}

.bottom .el-button:hover {
    box-shadow: 0px 2px 10px #59a2f6;

    font-size: 15px;
    width: 180px;
}

.bottom .el-pagination {
    margin: auto;
    margin-top: 30px;
}
</style>